<template>
  <div ref="imageWrapper">
    <a-card title="查询条件" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="20">
              <a-col :span="8">
                <a-form-model-item label="模板名称">
                  <a-input v-model="queryParam.name" placeholder="请输入模板名称" />
                </a-form-model-item>
              </a-col>
              <template v-if="toggleSearchStatus">
                <a-col :span="7">
                  <a-form-item label="模板类型">
                    <j-dict-select-tag
                      v-model="queryParam.type"
                      placeholder="请选择模板类型"
                      dict-code="template_type"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="模板版本">
                    <a-input
                      v-model="queryParam.version"
                      addon-before="V"
                      type="Number"
                      :step="0.1"
                      :min="1"
                      placeholder="请输入模板版本"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="发布日期">
                    <j-date v-model="queryParam.addTime_begin" placeholder="请选择开始日期" class="query-group-cust" />
                    <span class="query-group-split-cust" />
                    <j-date v-model="queryParam.addTime_end" placeholder="请选择结束日期" class="query-group-cust" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="启用状态">
                    <j-dict-select-tag
                      v-model="queryParam.status"
                      placeholder="请选择启用状态"
                      dict-code="template_status"
                    />
                  </a-form-item>
                </a-col>
              </template>
            </a-col>
            <a-col :span="4">
              <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" class="yellow_search_btn" @click="searchQuery">查询</a-button>
                <a-button icon="reload" class="clear_btn" @click="searchReset">清除条件</a-button>
                <a @click="handleToggleSearch">
                  <a-button class="clear_btn"> 高级搜索 <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/></a-button>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 20px">
      <template slot="title"><span style="font-weight: bold">模板列表</span></template>
      <a-table
        ref="table"
        size="middle"
        bordered
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="actionName">
          <a-button size="small" class="clear_btn" icon="plus" @click="handleAdd('创建模板')">创建模板</a-button>
        </template>
        <!--        <template slot="riskInfo" slot-scope="text, record, index">-->
        <!--          <j-ellipsis :value="text" :length="10"/>-->
        <!--        </template>-->
        <template slot="status" slot-scope="text, record">
          <a-switch
            :checked="record.status == '1' ? true : false"
            checked-children="已启用"
            un-checked-children="未启用"
            @change="changeStatus({ $event, record })"
          />
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button @click="OnSelectVersion(record)">选择版本</a-button>
          <a-button style="margin: 0 5px" @click="OnPerview(record)">预览模板</a-button>
          <a-button @click="OnEditTemp(record)">修改模板</a-button>
          <a-popconfirm title="确定删除吗?" @confirm="() => OnRemove(record)">
            <a-button style="margin-left:5px">
              删除
            </a-button>
          </a-popconfirm>
          <a-popconfirm
            v-if="record.checkStatus != '1'"
            v-has="'audit:sjcjmblb'"
            title="是否通过吗?"
            cancelText="驳回"
            okText="通过"
            @confirm="() => OnAudit(record, 1)"
            @cancel="() => OnAudit(record, 2)"
          >
            <a-button style="margin-left:5px">
              审核
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <CreateModal ref="modalForm" @ok="modalFormOk" />
      <VersionModal ref="selectVersion" @ok="modalFormOk" @close="modalFormOk"/>
      <EditModal ref="editForm1" @ok="modalFormOk" />
      <PerviewModal ref="perviewModal" />
      <AddVersionModal ref="AddVersionModal" @ok="modalFormOk" />
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction, postAction, deleteAction, putAction } from '@/api/manage'
import CreateModal from './create/CreateModal'
import EditModal from './edit/EditModal'
import VersionModal from './version/VersionModal'
import PerviewModal from './perview/PerviewModal'
import AddVersionModal from './version/addVersion/AddVersionModal'

import columns from './columns'

export default {
  components: {
    CreateModal,
    EditModal,
    VersionModal,
    PerviewModal,
    AddVersionModal
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      queryParam: {},
      superParam: {},
      defaultModel: {},
      modelData: [],
      versionDisabled: true,
      url: {
        list: '/sjtb/dataCollectionTemplateInfo/list',
        edit: 'sjtb/dataCollectionTemplateInfo/edit',
        delete: '/sjtb/dataCollectionTemplateInfo/delete',
        audit: '/sjtb/dataCollectionTemplateVersion/examine'
      },
      columns: columns()
    }
  },
  computed: {},
  watch: {
    $route: {
      handler: function(to) {
        if (to.path === '/sjcj/mbgl/mbsj/hz' || to.path === '/sjcj/mbgl/mbsj/tb') {
          setTimeout(() => {
            this.handleAdd('创建模板')
          }, 1000)
        }
        if (to.path === '/sjcj/mbgl/bbgl/setting') {
          setTimeout(() => {
            this.defaultModel = Object.assign({}, this.dataSource[0], { versionDisabled: this.versionDisabled })
            this.OnAddVer()
          }, 1500)
        }
        if (to.path === '/sjcj/mbgl/bbgl/enable' || to.path === '/sjcj/mbgl/bbgl/defend') {
          setTimeout(() => {
            this.defaultModel = Object.assign({}, this.dataSource[0], { versionDisabled: this.versionDisabled })
            this.OnSelectVersion(this.defaultModel)
          }, 1500)
        }
        if (to.path === '/sjcj/mbgl/bbgl/preview') {
          setTimeout(() => {
            this.defaultModel = Object.assign({}, this.dataSource[0], { versionDisabled: this.versionDisabled })
            this.OnPerview(this.defaultModel)
          }, 1500)
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    async changeStatus({ $event, record }) {
      console.log($event, record)
      let that = this
      let res = await getAction('/sjtb/dataCollectionTemplateVersion/check', { templateId: record.id })
      debugger
      if (res.code === 400) {
        this.$message.error(res.message)
      } else {
        record.status = $event ? '1' : '0'
        httpAction(this.url.edit, record, 'put').then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
          } else {
            console.log(res)
          }
        })
      }
    },
    OnRemove(record) {
      deleteAction(this.url.delete, { id: record.id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    async OnAudit(record, checkStatus) {
      try {
        let res = await putAction(this.url.audit, {
          id: record.id,
          checkStatus
        })
        if (res.success) {
          this.$message.success(res.result)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        throw new Error(error)
      }
    },
    OnPerview(record) {
      this.$refs.perviewModal.edit(record)
      this.$refs.perviewModal.title = `（${record.reportType_dictText}v:${record.version}）`
      this.$refs.perviewModal.disableSubmit = false
    },
    OnSelectVersion(record) {
      this.$refs.selectVersion.edit(record)
      this.$refs.selectVersion.title = '选择版本'
      this.$refs.selectVersion.disableSubmit = false
    },
    OnEditTemp(record) {
      this.$refs.editForm1.edit(record)
      this.$refs.editForm1.title = '修改模板'
      this.$refs.editForm1.disableSubmit = false
    },
    OnAddVer() {
      const rowId = this.defaultModel.id
      this.$refs.AddVersionModal.add(rowId)
      this.$refs.AddVersionModal.title = '新增版本'
      this.$refs.AddVersionModal.disableSubmit = false
      this.$refs.AddVersionModal.versionDisabled = this.defaultModel.versionDisabled
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';

.search {
  background: url(/img/search_bg.204329a9.png) 100% 100%;
}
</style>
